
<template xmlns="http://www.w3.org/1999/html">
  <input :style="defalutSytle"
          @focus="testss"
          :value="text"
         @input="onchange"
         class="el-input el-input--default el-input--suffix"
           />
</template>

<script setup lang="ts">

import {onBeforeMount, onBeforeUnmount, onUnmounted, ref, toRef} from "vue";


const emits = defineEmits(['update:inputValue'])

const props = defineProps({
  text : String,
  backgroundColor : String, //颜色
  opacity : Number, //透明度
  fontSize : String, //字体大小(默认去父级的)
  borderRadius : String, //长方形圆角弧度
  borderColor : String, // 边缘颜色
  fontWeight : String, //是否加粗
  color : String, //字体颜色
  totalColor : String,  //整体颜色
  initValue : String  //整体颜色
});

let defalutSytle = ref({
  backgroundColor: '',
  opacity: 1,
  borderRadius: '4px',
  fontSize: '15px',
  borderColor: '',
  fontWeight: 'no',
  color: '',
  totalColor: ''
})

let text =toRef(props,'text')

let result = () =>{
  Object.assign(defalutSytle.value,props);
  debugger
  if (props.initValue){
    let totalColor = props.initValue;
    //去除边框颜色和字体颜色的透明度设置
    defalutSytle.value['color'] = updateColor(totalColor) ||'';
    defalutSytle.value['borderColor'] = updateColor(totalColor) ||'';
    defalutSytle.value['backgroundColor'] = totalColor;
    return defalutSytle.value;
  }

  if (props.totalColor){
    let totalColor = defalutSytle.value.totalColor;
    //去除边框颜色和字体颜色的透明度设置
    defalutSytle.value['color'] = updateColor(totalColor) ||'';
    defalutSytle.value['borderColor'] = updateColor(totalColor) ||'';
    defalutSytle.value['backgroundColor'] = totalColor;
  }
  return defalutSytle.value;
}

// 去除透明度
const updateColor = (colorValue: string | undefined) => {
  if (colorValue) {
    let parts = colorValue.toString().split(',');
    if (parts.length > 3) {
      return `rgb(${parts[0].slice(5)}, ${parts[1]}, ${parts[2]})`;
    }
  }
  return colorValue;
};

//接收父组件变化(专门用于挂载周期)
const  getFather = (newColorValue: any) => {
  console.log('爸爸啊爸爸，我是你儿子',newColorValue)
  if (newColorValue){
    let totalColor = newColorValue;
    //去除边框颜色和字体颜色的透明度设置
    defalutSytle.value['color'] = updateColor(totalColor) ||'';
    defalutSytle.value['borderColor'] = updateColor(totalColor) ||'';
    defalutSytle.value['backgroundColor'] = totalColor;
  }

}

//如果有些地方只能绑定成员方法不买单走这里(只加载一次的话，watch也有这样的特性)
onBeforeMount(() => {
  // console.log('wryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyxcvsadf')
  // console.log(props.initValue)
  // console.log(props.text)
  result()
});

// 去除透明度
const showParam = () => {
  console.log(props.totalColor)
};

// 边框颜色还原默认值
const  testss = () => {
}

// 还原默认值
const  onchange = (e: any) => {
  console.log('调用了',e.target.value);
  text.value = e.target.value;
  emits('update:inputValue', e.target.value);
}

// 调用父方法清零    此方法可不用跟input绑定，估计destory的时候会自动销毁数据
const  clearValue = () => {
  defalutSytle.value ={
    backgroundColor: '',
    opacity: 1,
    borderRadius: '4px',
    fontSize: '15px',
    borderColor: '',
    fontWeight: 'no',
    color: '',
    totalColor: ''
  }
  text.value =''
}

onBeforeUnmount(() => {
  // console.log('什么情况')
  // console.log('sdfwaewea',text)
  // console.log('sdfwaewea',props.text)
  console.log('子组件被调用了销毁方法，内部数据为',defalutSytle,props)
})

onUnmounted(() => {
  console.log('子组件被调用了销毁方法，内部数据为',defalutSytle,props,text)
})

defineExpose({getFather,clearValue})


</script>

<style scoped>
.el-input:focus {
  border: 2px solid black; /* 聚焦时边框变为黑色 */
}
</style>
